<template>
  <div class="infinite-list-wrapper">
    <!-- 想自己写下拉加载 -->
    <ul class="infinite-list"
>
      <li v-for="(item, index) in videoList" :key="index" class="infinite-list-item" @click="toVideo(item.data.vid)">
        <!-- 视频封面 -->
        <img :src="item.data.coverUrl + '?param=300y170'" alt="">
        <!-- 视频标题 -->
        <div class="text-hidden font-14">{{ item.data.title }}</div>
        <!-- 作者 -->
        <div class="author font-12 pointer"> by&nbsp;{{ item.data.creator.nickname }} </div>
        <!-- 视频时长 -->
        <div class="video-duration cover-font">{{ (item.data.durationms / 1000) | durationFormat }}</div>
        <!-- 播放量 -->
        <div class="video-count cover-font">
          <i class="iconfont icon-24gl-play font-12"></i>
          {{ item.data.playTime | playtime }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  mounted() {
    this.$parent.$parent.$parent.$el.addEventListener('scroll', this.scrollMethod)
  },
  destroyed() {
    this.$parent.$parent.$parent.$el.removeEventListener('scroll', this.scrollMethod)
  },
  props: {
    load: {
      type: Function
      // default: () => console.log('test')
    },
    videoList: {
      type: Array,
      default: () => []
    },
    isDisabled: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    noMore () {
      return this.count >= 20
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    toVideo (id) {
      this.$emit('toVideo', id)
    },
    scrollMethod() {
      const target = this.$parent.$parent.$parent.$el
      if (Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight) {
        this.load()
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 这里div和ul高度都设置100%,那么他们高度就一样了,但是我不设置预先加载infinite-scroll-immediate以填满div的话,我这里一开始显示的8个视频,并不会让ul中li的内容超出div,也就没有滚动条了,就没办法无限滚动了,所以还是要设置预先加载
// .infinite-list-wrapper {
//     height: 80%;
//     border: 1px solid black;
// }
// .infinite-list-wrapper {
//   overflow: visible;
// }
.infinite-list {
      width: 100%;
      height: 500px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
      }
      &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          box-shadow: inset 0 0 3px #e0e0e0;
          background-color: #e0e0e0;
      }

      .infinite-list-item {
        position: relative;
        width: 22%;
        margin: 1%;
        text-align: left;
        img {
          width: 100%;
          height: auto;
        }
        .author {
          color: #cfcfcf;
        }
      }
    }

.video-duration {
  position: absolute;
  top: 10px;
  right: 10px;
}
.video-count{
  position: absolute;
  top: 10px;
  left: 10px;
}

</style>
